import { Button, } from "antd";
import { useState, memo, useMemo } from "react";

const ChildA = () => {
    console.log("子组件A被渲染了")
    return <div className="border-solid border-2 border-red-600 h-20">我是子组件A，我没有使用Memo</div>
}
const ChildB = memo((props)=> {
    console.log("memo--子组件B被渲染了!!!!")
    return <div className="border-solid border-2 border-green-800 h-20">我是子组件B，我有Memo,-------props.num:{props.num}</div>
})
const ChildC = memo((props)=> {
    console.log("memo--子组件C被渲染了!!!!")
    return <div className="border-solid border-2 border-green-800 h-20">我是子组件C，测试引用类型,-------props.arr:{props.arr}</div>
})
const MemoPage = () => {
    const [randomNum, setRandomNum] = useState(0)
    const [value, setValue] = useState(0)
    const arr = useMemo(()=> {
        return [1, 2, 3, 4, 5]
    },[])
    return (
        <>
            <div className="border-dashed border-2 border-indigo-600 p-5">
                <p>我是父组件，刷新randomNum组件都会更新，刷新value只有ChildA会更新；组件C只会在第一次运行，因为useMemo没有设置依赖值</p>
                <Button onClick={() => setRandomNum(Math.random())}>刷新randomNum</Button>
                <Button onClick={() => setValue(Math.random())}>刷新setValue</Button>
                {value}

                <div className="flex mt-10">
                    <ChildA ></ChildA>
                    <ChildB num={randomNum}></ChildB>
                    <ChildC arr={arr}></ChildC>
                </div>
            </div>
        </>
    )
}
export default MemoPage;